<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on 事件处理函数参数</title>
</head>
<body>
<div id="app">
    <!--  调用无参函数时，可以直接使用函数的名称也可以在函数的名称后面添加()  -->
    <button v-on:click="btnClicked">按钮1</button>
    <button v-on:click="btnClicked()">按钮2</button>

    <br>

    <!--  调用有参函数，但是使用的时候没有使用()没有传参，结果会默认将事件传入  -->
    <button @click="buttonClicked">按钮3</button>
    <!--  调用有参函数，但是使用的时候使用()没有传参，结果就是参数未定义 -->
    <button @click="buttonClicked()">按钮4</button>
    <!--  调用有参函数，但是使用的时候使用()并在()中显式指定参数内容，结果就是传入的参数 -->
    <button @click="buttonClicked(123456)">按钮5</button>


    <br>
    <!--  调用多个参数的函数，使用过程中没有使用(),默认只会传入事件作为参数，后续的其他参数未定义  -->
    <button @click="clicked">按钮6</button>
    <!--  调用有参函数，但是使用的时候使用()没有传参，结果就是参数未定义 -->
    <button @click="clicked()">按钮7</button>
    <!--  调用多个参数的函数，如果传入一个参数，结果第二个参数未定义-->
    <button @click="clicked(123)">按钮8</button>
    <!--  使用 $event 代表默认的事件  -->
    <button @click="clicked(123, $event)">按钮9</button>
</div>
<script type="module">
    import {createApp} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
        setup() {
            function btnClicked() {
                console.log("点击了按钮");
            }

            function buttonClicked(para) {
                console.log(para);
            }

            function clicked(para, event) {
                console.log(para);
                console.log(event);
            }

            return {
                btnClicked,
                buttonClicked,
                clicked,
            }
        }
    })

    app.mount("#app")
</script>

</body>
</html>